<template>
    <div id="index">
        <dv-full-screen-container class="bg">
            <div class="host-body">
                <titleView :titleName="titleName"/>

                <div class="body-box">
                    <div v-for="(item,index) in routerList"
                         :key="index"
                         class="chart-view-box"
                         @click.stop="toChartView(index)">
                        <div class="view-box-grid">
                            <div class="router-title" 
                                 @click.stop="toChartView(index)">{{ item.title }}</div>
                            <div class="chart-rep">
                                <prevChart1 v-if="index==0"/>
                                <prevChart2 v-if="index==1"/>
                                <prevChart3 v-if="index==2"/>
                                <prevChart4 v-if="index==3"/>
                                <div class="img-box" 
                                     @click.stop="toChartView(index)">
                                    <img :src="srcUrl(index)" alt="">
                                </div>
                            </div>
                        </div>
                        <!--                        <img class="guide-icon" src="../assets/click.png" alt="">-->
                        <dv-border-box-7 :color="defs.constants.dvBorderColor" v-if="index==0"></dv-border-box-7>
                        <dv-border-box-9 :color="defs.constants.dvBorderColor" v-if="index==1"></dv-border-box-9>
                        <dv-border-box-12 :color="defs.constants.dvBorderColor" v-if="index==2"></dv-border-box-12>
                        <dv-border-box-10 :color="defs.constants.dvBorderColor" v-if="index==3"></dv-border-box-10>
                    </div>
                </div>
            </div>
        </dv-full-screen-container>
    </div>
</template>

<script>
import titleView from "@/components/titleView";
import prevChart1 from "@/components/echart/view1/bottomLeft";
import prevChart2 from "@/components/echart/view2/topRight";
import prevChart3 from "@/components/echart/view3/topLeft";
import prevChart4 from "@/components/echart/view4/bottomLeft";

export default {
    data() {
        return {
            titleName: {
                title1: '十五车间生产经营管理平台',
                title2: '分类管理',
                title3: '图表入口',
            },
            routerList: [
                {
                    title: '生产管理',
                },
                {
                    title: '经营管理',
                },
                {
                    title: '工艺质量管理',
                },
                {
                    title: '制造资源管理',
                },
            ],
        };
    },
    components: {
        titleView,
        prevChart1,
        prevChart2,
        prevChart3,
        prevChart4,
    },
    mounted() {
    },
    methods: {
        toChartView(index) {
            this.selfUtils.goRouter(this, 'chartViews', 'replace', {index: index,});
        },
        srcUrl(index) {
            return require(`../assets/router${index + 1}-sm.png`);
        },
    }
};
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
</style>
<style lang="scss" scoped>
#index {
    .host-body {
        .body-box {
            display: grid;
            grid-template-columns: repeat(2, 50%);
            grid-template-rows: repeat(2, 50%);

            .chart-view-box {
                background-size: cover;
                background-position: center center;
                position: relative;
                cursor: pointer;

                div[class^=dv-border-box] {
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: -1;
                }

                .view-box-grid {
                    width: 100%;
                    height: 100%;
                    display: grid;
                    grid-template-columns: repeat(1, 100%);
                    grid-template-rows: 1.5rem auto;

                    .router-title {
                        width: 2.6rem;
                        height: 1.125rem;
                        line-height: 0.98rem;
                        text-align: center;
                        position: relative;
                        top: 0.2rem;
                        left: 0.2rem;
                        font-size: 0.3rem;
                        font-weight: bolder;
                        background-image: url("../assets/title-border.png");
                        background-size: cover;
                        background-position: center center;
                    }

                    .chart-rep {
                        display: grid;
                        grid-template-columns: 1.6fr 1fr;
                        grid-template-rows: repeat(1, 100%);

                        div.img-box {
                            width: 100%;
                            height: 100%;
                            position: relative;

                            img {
                                //width: 100%;
                                height: 100%;
                                //margin: 0 auto;
                                position: absolute;
                                top: 0;
                                left: 0;
                            }
                        }
                    }
                }

                .guide-icon {
                    width: 0.8rem;
                    height: 0.8rem;
                    position: absolute;
                    right: 0;
                    top: 100%;
                    animation: guideToClick .5s linear 0s infinite alternate;
                    -webkit-animation: guideToClick .5s linear 0s infinite alternate;
                }
            }
        }
    }
}

@keyframes guideToClick {
    from {
        -webkit-transform: translate(-50%, -150%) rotate(-45deg) scale(0.5);
        -moz-transform: translate(-50%, -150%) rotate(-45deg) scale(0.5);
        -ms-transform: translate(-50%, -150%) rotate(-45deg) scale(0.5);
        -o-transform: translate(-50%, -150%) rotate(-45deg) scale(0.5);
        transform: translate(-50%, -150%) rotate(-45deg) scale(0.5);
    }
    to {
        -webkit-transform: translate(-50%, -150%) rotate(-45deg) scale(1);
        -moz-transform: translate(-50%, -150%) rotate(-45deg) scale(1);
        -ms-transform: translate(-50%, -150%) rotate(-45deg) scale(1);
        -o-transform: translate(-50%, -150%) rotate(-45deg) scale(1);
        transform: translate(-50%, -150%) rotate(-45deg) scale(1);
    }
}
</style>